<template>
	<div class="near">
		<ul>
			<li v-for="(item,index) in nearList">
				<div class="near-head">
					<div class="head-left">
						<div class="head-img">
							<img :src="item.head_portrait" />
						</div>
						<div class="head-text">
							<div class="head-title">
								<span>{{item.nick_name}}</span>
								<span>{{item.distance_str}}</span>
							</div>
							<div class="sex">
								<img v-if="item.sex=='女'" src="../static/img/woman.png" />
								<img v-if="item.sex=='男'" src="../static/img/man.png" />
								<span>{{item.age}}</span>
								<span>|</span>
								<span>{{item.birthday}}</span>
							</div>
						</div>
					</div>
					<div v-if="item.follow==0" :data-type='0' :data-fllow='item.follow' :data-id='item.user_id' @click="clickbtn(item, 'follow')"
					 class="head-right">
						+关注
					</div>
					<div v-if="item.follow==1" :data-type='0' :data-fllow='item.follow' :data-id='item.user_id' @click="clickbtn(item, 'follow')"
					 class="head-right2">
						已关注
					</div>
				</div>
				<div class="near-content">
					<div class="des" :data-type='1' :data-id='item.trend_id' :data-userid='item.user_id' @click="clickbtn(item, 'detail')">
						{{item.content}}
					</div>
					<div v-if="item.video==''" class="near-img">
						<div>
							<img :src="item.img[0].url" />
						</div>
					</div>
					<div v-if="item.video!=''" class="near-img">
						<div>
							<video controls="controls" :src="item.video"></video>
						</div>
					</div>
				</div>
				<div class="near-operation">
					<div class="opera-left">
						<div class="opera-con" :data-type='2' :data-like='item.likes_status' :data-id='item.trend_id' @click="clickbtn(item, 'like')">
							<img v-if="item.likes_status==0" class="icon1" src="../static/img/zanGray.png" />
							<img v-if="item.likes_status==1" class="icon1" src="../static/img/zanRed.png" />
							<span>{{item.likes_count}}</span>
						</div>
						<div class="opera-con" :data-type='1' :data-id='item.trend_id' :data-userid='item.user_id' @click="clickbtn(item, 'detail')">
							<img class="icon2" src="../static/img/info.png" />
							<span>{{item.discuss_count}}</span>
						</div>
						<div class="opera-con">
							<img class="icon3" src="../static/img/gift.png" />
							<span>{{item.gift_count}}</span>
						</div>
					</div>
					<div class="opera-right">
						<img class="icon4" src="../static/img/share.png" />
					</div>
				</div>
				<img style="width: 100%;height: auto;" src="../static/img/bottom.png" />
			</li>
		</ul>
	</div>
</template>

<script>
	import globaldata from '../globaldata.js'
	import modal from '../routeUrl.js'
	export default {
		components: {

		},
		props: {
			nearList: Array
		},
		data() {
			return {

			}
		},
		created() {
			console.log(globaldata)
			console.log(this.nearList)
			
		},
		mounted() {

		},
		methods: {
			clickbtn(item, type) {
				let parms = {}
				console.log(item)
				if (type === 'like') {
					parms = {
						like: item.likes_status,
						id: item.user_id,
						type: type
					}
				}
				if (type === 'follow') {
					parms = {
						follow: item.follow,
						id: item.user_id,
						type: type
					}

				}
				if (type === 'detail') {
					parms = {
						id: item.trend_id,
						userid: item.user_id,
						type: type
					}
				}
				/**
				 * e.target.dataset.type==0  关注
				 * e.target.dataset.type==1  详情
				 * e.target.dataset.type==2  点赞
				 */
				
		
				console.log(parms)
				this.$emit("clickevent", parms)
			},

		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.near {
		background: #F4F4F4;
	}

	.near-head {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding: px2vw(9) px2vw(17);
		box-sizing: border-box;
		border-bottom: 1px dashed #D9D9D9;
		background: #FFFFFF;
	}

	.near-content {
		background: #FFFFFF;
	}

	.icon1 {
		width: px2vw(14);
		height: px2vw(14);

	}

	.icon2 {
		width: px2vw(15);
		height: px2vw(14);

	}

	.icon3 {
		width: px2vw(16);
		height: px2vw(14);

	}

	.icon4 {
		width: px2vw(14);
		height: px2vw(14);

	}

	.near-operation {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding: px2vw(10) px2vw(32) px2vw(3) px2vw(32);
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.opera-left {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.head-left {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.opera-con {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		margin-right: px2vw(30);

	}

	.opera-con img {
		display: block;
		margin-right: px2vw(5);
	}

	.opera-con span {
		font-size: px2vw(13);
	}

	.head-img img {
		width: px2vw(40);
		height: px2vw(40);
		display: block;
		border-radius: 50%;
	}

	.head-text {
		margin-left: px2vw(5);
	}

	.sex {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.sex img {
		width: px2vw(8);
		height: px2vw(10);
		display: block;
		margin-right: px2vw(2);
	}

	.sex span {
		display: inline-block;
		color: #737981;
		font-size: px2vw(11);
		margin-right: px2vw(3);
	}



	.head-title span:first-child {
		display: inline-block;
		font-size: px2vw(15);
		font-weight: bold;
	}

	.head-title span:last-child {
		display: inline-block;
		width: px2vw(46);
		height: px2vw(15);
		font-size: px2vw(10);
		color: #FFFFFF;
		text-align: center;
		line-height: px2vw(15);
		border-radius: 30px;
		background: #FB5492;
	}

	.head-right {
		font-size: px2vw(12);
		color: #FFFFFF;
		width: px2vw(60);
		height: px2vw(25);
		text-align: center;
		line-height: px2vw(25);
		border-radius: px2vw(25);
		background: #76CBCA;
	}

	.head-right2 {
		font-size: px2vw(12);
		color: #76CBCA;
		width: px2vw(60);
		height: px2vw(25);
		text-align: center;
		line-height: px2vw(25);
		border-radius: px2vw(25);
		border: 1px solid #76CBCA;
	}

	.des {
		font-size: px2vw(14);
		color: rgba(27, 29, 31, 1);
		line-height: px2vw(21);
		padding: px2vw(11) px2vw(19) px2vw(8) px2vw(19);
		box-sizing: border-box;
	}

	.near-img {
		padding: 0px px2vw(19) px2vw(14) px2vw(19);
		box-sizing: border-box;
		border-bottom: 1px dashed #D6D6D6;
		height: px2vw(188);
	}

	.near-img div {
		overflow: hidden;
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}

	.near-img img {
		width: 100%;
		height: auto;
		display: block;

	}

	.near-img video {
		width: 100%;
		height: px2vw(188);
		background: #000000;
		border-radius: 20px;
		overflow: hidden;
	}
</style>
